<template>
  <div style="padding:4px 10px">
    <el-row style="padding:4px">
      <el-form-item label="类型">
        <el-radio-group :model-value="valCellType" size="small" @change="handleCellType">
          <el-radio-button label="Textbox">
            文本
          </el-radio-button>
          <el-radio-button label="Image">
            图片
          </el-radio-button>
          <el-radio-button label="CheckBox">
            复选框
          </el-radio-button>
        <!-- <el-radio-button label="SubReport">
            子报表
          </el-radio-button> -->
        <!-- <el-radio-button label="Line">
          线
        </el-radio-button> -->
        </el-radio-group>
      </el-form-item>
    </el-row>
    <el-row style="padding:4px">
      <el-form-item label="行高">
        <el-input-number
          :model-value="valHeight" :step="3" step-strictly :controls="false" style="width:60px"
          @change="handleHeightChange"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="列宽">
        <el-input-number
          :model-value="valWidth" :step="3" step-strictly :controls="false" style="width:60px"
          @change="handleWidthChange"
        ></el-input-number>
      </el-form-item>
    </el-row>

    <template v-if="valCellType==='Image'">
      <el-row style="padding:4px">
        图片ID
        <el-input style="width:200px" :model-value="valExpression">
          <template #append>
            <el-button icon="Search" @click="handleEditExpression" />
          </template>
        </el-input>
        图片名称
        <el-input :model-value="ImageName" style="width:200px" @input="handleChangeImageName"> </el-input>
      </el-row>
    </template>
    <template v-if="valCellType==='Textbox'||valCellType==='CheckBox'">
      <el-row>
        <el-form-item label="表达式">
          <el-input
            :model-value="valExpression" style="width:180px"
          >
            <template #append>
              <el-button icon="Search" @click="handleEditExpression" />
            </template>
          </el-input>
        </el-form-item>
      </el-row>
    </template>
  </div>

</template>

<script>
export default {
  inject: ['manager'],
  computed: {
    currentGridView() {
      if (this.manager.states.tableIndex > -1) {
        return this.manager.Body.AllGridViews[this.manager.states.tableIndex];
      } else {
        return null;
      }
    },
    valCellType() {
      if (this.manager.states.currentCell) {
        return this.manager.states.currentCell.CellType;
      }
      return '';
      // if (this.manager.states.visibleCells.length > 0) {
      //   let flag = this.manager.states.visibleCells.every(a => a.CellType === 'Textbox');
      //   if (flag) {
      //     return 'Textbox';
      //   }
      //   flag = this.manager.states.visibleCells.every(a => a.CellType === 'Image');
      //   if (flag) {
      //     return 'Image';
      //   }
      //   flag = this.manager.states.visibleCells.every(a => a.CellType === 'SubReport');
      //   if (flag) {
      //     return 'SubReport';
      //   }
      // }
      // return '';
    },
    valExpression() {
      if (this.manager.states.currentCell) {
        return this.manager.states.currentCell.Text;
      }
      return '';
    },
    valHeight() {
      if (this.currentGridView && this.manager.states.currentCell.RowIndex !== undefined) {
        return this.currentGridView.Rows[this.manager.states.currentCell.RowIndex].Height;
      }
      return 0;
    },
    valWidth() {
      if (this.currentGridView && this.manager.states.currentCell.RowIndex !== undefined) {
        return this.currentGridView.Columns[this.manager.states.currentCell.ColumnIndex].Width;
      }
      return 0;
    },
    ImageName() {
      if (this.manager.states.currentCell) {
        return this.manager.states.currentCell.ImageName;
      }
      return '';
    },

  },
  methods: {
    handleHeightChange(currentValue) {
      this.manager.states.visibleCells.forEach(a => {
        this.currentGridView.Rows[a.RowIndex].Height = currentValue;
      });
    },
    handleWidthChange(currentValue) {
      this.manager.states.visibleCells.forEach(a => {
        this.currentGridView.Columns[a.ColumnIndex].Width = currentValue;
      });
    },
    handleCellType(val) {
      this.manager.states.visibleCells.forEach(a => {
        a.CellType = val;
        a.Text = '';
      });
    },
    expCallBack(pim, psm, param) {
      this.manager.states.currentCell.Text = pim;
      this.manager.states.currentCell.CellPsm = psm;
      this.manager.states.currentCell.CellParam = param;
    },
    handleEditExpression() {
      this.manager.expCallBack = this.expCallBack;
      this.manager.states.EditExpression = this.manager.states.currentCell.Text;

      this.manager.states.EditExpressionVisible = true;
    },
    handleChangeImageName(val) {
      this.manager.states.currentCell.ImageName = val;
    },
  },
};
</script>

<style>

</style>
